<template>
    <div class="login">
    <div class="loginBox">
        <h2 class="loginH2"><strong>知心购</strong> 后台管理系统</h2>
        <div class="loginCon">
            <div class="titleDiv">
                <h3>知行合壹</h3>
                <p>以简御繁 知行合壹</p>
                <i class="el-icon-collection-tag"></i>
            </div>
            <el-form ref="loginForm" :rules="rules" :model="ruleForm">
                <el-form-item prop="user">
                    <el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="ruleForm.password" show-password></el-input>
                </el-form-item>
                <el-button type="primary" class="loginBtn" @click="loginHandler('loginForm')">登录</el-button>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        data() {
    return {
        ruleForm: {
            username: 'admin',
            password: '123456'
        },
        rules: {
            username: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                },
                {
                    min: 3,
                    max: 15,
                    message: '长度在3到5个字符',
                    trigger: 'blur'
                }
            ],
            password: [{
                required: true,
                message: '请输入密码',
                trigger: 'blur'
            }]
        }
    }
},
methods: {
    loginHandler(form) {
        this.$refs[form].validate(valid => {
            if (valid) {
                this.fetchLogin()
            } else {
                return
            }
        })
    },
    fetchLogin() {
        const params = this.ruleForm
        login(params).then(res => {
            if (res.meta.status == 200) {
                this.$router.replace('/')
            }
        })
    }
}
    }
</script>

<style lang="scss" scoped>
.login {
    height: 100%;
    width: 100%;
    background: url(../../assets/pageBg/loginBg.jpg) no-repeat center center;
    background-size: 100% 100%;
    overflow: hidden;

    .loginBox {
        height: 455px;
        width: 550px;
        margin: 0 auto;
        position: relative;
        top: 50%;
        margin-top: -287px;

        .loginH2 {
            font-size: 38px;
            color: #fff;
            text-align: center;
        }

        .loginCon {
            margin-top: 30px;
            background: #eee;
            border-radius: 4px;

            .titleDiv {
                padding: 0 28px;
                background: #fff;
                position: relative;
                height: 120px;
                border-radius: 4px 4px 0 0;

                h3 {
                    font-size: 22px;
                    color: #555;
                    font-weight: initial;
                    padding-top: 23px;
                }

                p {
                    font-size: 16px;
                    color: #888;
                    padding-top: 12px;
                }

                i {
                    font-size: 48px;
                    color: #ddd;
                    position: absolute;
                    right: 27px;
                    top: 29px;
                }
            }

            .el-form {
                padding: 25px 25px 30px 25px;
                background: #eee;
                border-radius: 0 0 4px 4px;

                .loginBtn {
                    width: 100%;
                    background: #19b9e7;
                }
            }
        }
    }
}
</style>